<template>
  <div class="app-container">
    <!-- 课程头部封面 -->
    <div class="course-cover" :style="{ backgroundImage: 'url(' + require(`@/assets/${course.courseCover}`) + ')'}"></div>

    <!-- 课程标题与基本信息 -->
    <div class="course-header container">
      <div class="course-title-section">
        <h1 class="course-title">{{ course.courseName }}</h1>
        <div class="course-brief-intro">{{ course.courseBriefIntro }}</div>
        <div class="course-meta">
          <span class="meta-item"><i class="el-icon-s-order"></i> 课程代码: {{ course.courseCode }}</span>
          <span class="meta-item"><i class="el-icon-calendar"></i> 学期: {{ course.semester }}</span>
          <span class="meta-item"><i class="el-icon-credit-card"></i> 学分: {{ course.credit }}</span>
          <span class="meta-item"><i class="el-icon-flag"></i> 状态: <el-tag :type="course.status === '0' ? 'success' : 'danger'" style="margin-left: 8px">{{ course.status === '0' ? '正常' : '停用' }}</el-tag></span>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content container">
      <el-row :gutter="30">
        <!-- 左侧主内容 -->
        <el-col :span="16">

          <el-tabs v-model="activeTab" class="course-tabs">
            <el-tab-pane label="课程介绍" name="intro">
              <div class="course-intro-content">
                <h3>课程概述</h3>
                <div class="content-section" v-html="course.description"></div>
                <h3>教学目标</h3>
                <div class="content-section" v-html="course.courseGoals"></div>
              </div>
            </el-tab-pane>

            <!-- 课程文件表格 -->
            <el-tab-pane label="课程课件" name="documents">
              <div class="material-container">  
                <!-- 过渡动画容器 -->
                <transition-group
                  name="table-transition"
                  tag="div"
                  class="table-transition-container"
                  @before-enter="beforeEnter"
                  @enter="enter"
                  @leave="leave">

                  <!-- 表格组件 -->
                  <el-table 
                    v-for="(tableData, index) in [filteredDocuments]" 
                    :key="fileType + index"
                    v-if="documents.rows"
                    :data="documents.rows.filter(filterDocumentType)"
                    ref="documentsTable"
                    class="material-table" 
                    v-loading="loading"
                    :style="{
                      'z-index': activeIndex - index,
                      'position': index > 0 ? 'absolute' : 'relative'
                    }">
                    <!-- 悬停选择类型 -->
                    <el-table-column 
                      prop="type" label="类型"
                      :min-width="150" align="center">
                      <template slot="header">
                        <el-popover
                          placement="bottom-start"
                          trigger="hover"
                          transition="el-zoom-in-top">
                          <div class="type-options">
                            <!-- 可供筛选类型 -->
                            <div 
                              v-for="item in typeOptions"
                              :key="item.value"
                              class="type-item"
                              @click="handleTypeSelect(item.value)">
                              {{ item.label }}
                            </div>
                          </div>
                          <template #reference>
                            <span class="header-filter">
                              {{ currentTypeLabel }}
                              <i class="el-icon-arrow-down"/>
                            </span>
                          </template>
                        </el-popover>
                      </template>
                    </el-table-column>

                    <el-table-column 
                      prop="file_name" label="文件" 
                      :min-width="200" align="center">
                    </el-table-column>
                    <el-table-column 
                      prop="create_time" label="上传时间"
                      :min-width="100" align="center">
                        <template slot-scope="scope">
                        {{ new Date(scope.row.create_time).toLocaleDateString() }}
                      </template>
                    </el-table-column>
                    <el-table-column 
                      label="操作"
                      :min-width="250" align="center">
                        <template slot-scope="scope">
                          <el-button 
                            size="mini" 
                            @click="preview_doc(scope.row)">预览</el-button>
                          <el-button 
                            size="mini" type="success" 
                            @click="download_doc(scope.row)">下载</el-button>
                          <el-button 
                            size="mini" type="danger" v-if="RolesUpload"
                            @click="delete_doc(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                  </el-table>
                </transition-group>

                <transition name="upload-fade">
                  <div class="upload-wrapper" v-if="isUploadVisible && RolesUpload">

                    <div class="upload-container">
                      <!-- 拖拽区域 (左侧) 80% -->
                      <div class="upload-area" :class="{ active: showUpload }">
                        <el-upload  
                          :action="uploadAction"
                          :drag="true"
                          :multiple="true"
                          :show-file-list="false"
                          :auto-upload="false"
                          :on-change="(file) => handleFileChange(file, this.selectedType)">
                          <div class="dragger-container">
                            <div class="dragger-up" style="flex:0 0 30%;">
                              <i class="el-icon-upload"></i>
                            </div>
                            <div class="dragger-middle" style="flex:0 0 40%;">
                              <p>点击上传资料</p>
                              <p>或拖拽文件到此区域</p>
                            </div>
                            <div class="dragger-down" style="flex:0 0 20%;">支持格式：doc/pdf/ppt/mp4/jpg（最大100MB）</div>
                          </div>
                        </el-upload>
                      </div>

                      <!-- 类型选择面板 (右侧) 20% -->
                      <div class="type-panel" :class="{ active: showUpload }">
                        <div class="type-select-panel">
                          <h4>上传文件类型</h4>
                          <el-select 
                            v-model="selectedType" 
                            :placeholder="selectedType ? '' : '请选择文件类型'"
                            style="width: 100%; margin-bottom: 15px;"
                            @change="handleTypeSelect2">
                            <el-option
                              v-for="item in selectedTypes"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              style="font-size: 12px;">
                            </el-option>
                          </el-select>
                          <el-button 
                            type="primary"
                            style="margin-top: 20px; width: 100%"
                            @click="handleUp">
                            上传
                          </el-button>
                        </div>
                      </div>
                    </div>

                    <!-- 待上传文件表格 -->
                    <div class="upload-table-container" :class="{ active: showUpload }">
                      <el-table 
                        :data="uploadDocuments" 
                        class="material-table">
                        <el-table-column 
                          prop="name" label="文件"
                          :min-width="250" align="center">
                        </el-table-column>
                        <el-table-column 
                          prop="type" label="类型" 
                          :min-width="150" align="center">
                        </el-table-column>
                        <el-table-column 
                          prop="fileSuffix" label="格式" 
                          :min-width="150" align="center">
                        </el-table-column>
                        <el-table-column 
                          label="操作"
                          :min-width="150" align="center">
                          <template #default="scope">
                            <el-button
                              type="danger" size="mini" icon="el-icon-delete"
                              @click="handleDeleteUpload(scope.$index)">
                              删除
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>

                  </div>
                </transition>
                
              </div>
            </el-tab-pane>

            <el-tab-pane label="课程考试" name="exams">
              <div class="empty-state">
                <i class="el-icon-edit"></i>
                <p>课程考试内容正在更新中...</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>

        <!-- 右侧侧边栏 -->
        <el-col :span="8">
          <!-- 教师信息卡片 -->
          <el-card class="teacher-card">
            <div class="teacher-info">
              <img :src="require(`@/assets/${course.teacherAvatar}`)" class="teacher-avatar" alt="教师头像">
              <div class="teacher-details">
                <h3 class="teacher-name">{{ course.teacherName }}</h3>
                <p class="teacher-university">{{ course.teacherUniversity }}</p>
              </div>
            </div>
          </el-card>

          <!-- 课程信息卡片 -->
          <el-card class="course-info-card">
            <div slot="header" class="card-header">
              <span>课程信息</span>
            </div>
            <div class="info-item">
              <label>所属专业：</label>
              <span>{{ course.deptId }}</span>
            </div>
            <div class="info-item">
              <label>选课容量：</label>
              <span>{{ course.capacity }} 人</span>
            </div>
            <!-- <div class="info-item">
              <label>开课时间：</label>
              <span>{{ formatDate(course.createTime) }}</span>
            </div> -->
            <div class="enroll-button">
              <el-button 
                type="primary" 
                size="medium" 
                class="btn-block"
                :disabled="course.status !== '0' || hasSelected"
                @click="handleSelectCourse"
              >
                {{ hasSelected ? '已选课' : (course.status === '0' ? '立即选课' : '课程已停用') }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios' 
import { mapGetters } from 'vuex'
import { getRecordsByCourseId } from "@/api/course/records"
import { getSelectionByStudentId, getSelectionByCourseId, addSelection } from "@/api/course/selection"
import { getDocumentsByCourseId, addDocument, delDocument, DocServer } from "@/api/course/document"

export default {
  created() {
    this.loadCourseData();
    this.loadCourseDocuments();
  },
  data() {
    return {
      uploadAction: `${DocServer}upload`,
      activeTab: 'intro',
      loading: false,
      // API响应数据填充
      course: {},
      documents: {
        total: 0,
        rows: [], // 确保初始化为数组
      },

      fileType: 'all',   // 新增默认值
      typeOptions: [
        { label: '全部资料', value: 'all' },
        { label: '课程教材', value: '教材' },
        { label: '课后作业', value: '作业' },
        { label: '实验报告', value: '实验' }
      ],
      
      showUpload: false,
      selectedType: '',
      selectedTypes: [
        { label: '课程教材', value: '教材' },
        { label: '课后作业', value: '作业' },
        { label: '实验报告', value: '实验' }
      ],
      // 待上传文件列表
      uploadDocuments: [],
      activeIndex: 0,      // 当前活动表格索引
      prevDocuments: [],   // 上一个状态的数据
      filteredDocuments: [], // 当前过滤后的数据

      isUploadVisible: true, // 控制上传区域的显示与隐藏

    }
  },
  mounted() {
    // 添加缩放控制
    this.$nextTick(() => {
      // document.body.style.zoom = '80%';
    });
  },
  watch: {
    // 监听文档数据变化
    documents: {
      deep: true,
      handler(newVal, oldVal) {
        // 保存旧数据用于动画
        this.prevDocuments = oldVal.rows ? [...oldVal.rows] : [];
        this.filteredDocuments = newVal.rows ? 
          [...newVal.rows.filter(this.filterDocumentType)] : [];
      }
    }
  },
  computed: {
    ...mapGetters(['id', 'roles']), // 获取当前用户ID和角色
    courseId() {
      return this.$route.params.id
    },
    RolesUpload() {
      return this.roles.includes('admin') || this.roles.includes('teacher');
    },

    currentTypeLabel() {
      const selected = this.typeOptions.find(item => item.value === this.fileType)
      return `类型：${selected?.label || '全部资料'}` // 确保默认显示
    }
  },

  methods: {
    // 加载课程数据
    loadCourseData() {
      // 获取当前登录学生ID
      const studentId = this.$store.state.user.id;
      Promise.all([
        getRecordsByCourseId(this.courseId),
        getSelectionByCourseId(this.courseId),
        getSelectionByStudentId(studentId)
      ]).then(([courseRes, courseSelections, studentSelections]) => {
        console.log('课程数据API响应:', JSON.stringify(courseRes.rows[0], null, 2))
        this.course = {
          recordId: courseRes.rows[0].recordId,
          courseId: courseRes.rows[0].courseId,
          courseName: courseRes.rows[0].courseName,
          deptId: courseRes.rows[0].deptId,
          teacherId: courseRes.rows[0].teacherId,
          teacherName: courseRes.rows[0].teacherName,
          teacherUniversity: courseRes.rows[0].teacherUniversity,
          credit: courseRes.rows[0].credit,
          capacity: courseRes.rows[0].capacity,
          status: courseRes.rows[0].status,
          teacherAvatar: courseRes.rows[0].teacherAvatar,
          courseCover: courseRes.rows[0].courseCover,
          semester: courseRes.rows[0].semester,
          courseCategory: courseRes.rows[0].courseCategory,
          courseCode: courseRes.rows[0].courseCode,
          // createTime: courseRes.rows[0].createTime,
          courseBriefIntro: courseRes.rows[0].courseBriefIntro,
          description: courseRes.rows[0].courseIntro,
          courseGoals: courseRes.rows[0].courseGoals
        }
        // console.log('course:', JSON.parse(JSON.stringify(this.course)))

        // 判断是否已选当前课程
        this.hasSelected = studentSelections.data
          .some(student => {
            // 注意'200' == 200为true，'200' === 200为false
            return student.courseId == this.courseId;
          });
        console.log(`选课状态: ${this.hasSelected ? '已选' : '未选'}`);

      }).catch(error => {
        console.error('数据加载失败：', error);
        this.$modal.msgError('课程数据加载失败');
      });
    },
    // 加载课程文件
    async loadCourseDocuments() {
      this.loading = true;
      try {
        const res = await getDocumentsByCourseId(this.courseId);
        console.log('课程文件列表:', JSON.stringify(res, null, 2))
        this.documents = {
          total: res.total,
          rows: res.rows.map(item => ({
            id: item.recordId,
            type: item.type,
            file_name: item.name,
            file_suffix: item.fileSuffix,
            file_path: item.filePath,
            create_time: item.createTime,
            update_time: item.updateTime,
          }))
        }
        // console.log('documents:', JSON.parse(JSON.stringify(this.documents)))
      } finally {
        this.loading = false;
      }
    },

    // 选课
    handleSelectCourse() {
      const selectionData = {
        courseId: this.courseId,
        studentId: this.$store.state.user.id,
        courseName: this.course.courseName,
        studentName: this.$store.state.user.nickName
      };

      addSelection(selectionData)
        .then(response => {
          this.$modal.msgSuccess('选课成功');
          this.hasSelected = true;
          // 可选：刷新选课记录
          this.loadCourseData(); 
        })
        .catch(error => {
          console.error('选课失败:', error);
          this.$modal.msgError('选课失败: ' + (error.response?.data?.msg || error.message));
        });
    },

    filterDocumentType(document) {
      return this.fileType === 'all' || document.type === this.fileType
    },
    // 课程文件类型选择
    handleTypeSelect(value) {
      // 类型未变化时直接返回
      if (value === this.fileType) return;

      // 1. 先隐藏上传区域
      this.isUploadVisible = false;
      // 2. 保存当前状态为旧数据
      this.prevDocuments = [...this.filteredDocuments];
      // 3. 更新文件类型
      this.fileType = value;      
      // 4. 增加活动索引触发动画
      this.activeIndex++;
      
      // 5. 强制更新表格布局
      this.$nextTick(() => {
        this.$refs.documentsTable[0].doLayout();
        // 6. 设置延时，等表格动画完成后再显示上传区域
        setTimeout(() => {
          this.isUploadVisible = true;
        }, 800); // 延时时间需要大于表格动画完成时间
      });
    },
  
    // 动画钩子函数 - 离开
    leave(el, done) {
      if (el.querySelector('.el-table__body-wrapper')) {
        const bodyWrapper = el.querySelector('.el-table__body-wrapper');
        const rows = bodyWrapper.querySelectorAll('tr');

        // 动画从下往上消失
        rows.forEach((row, index) => {
          const delay = (rows.length - index - 1) * 0.05;  // 逆向延迟
          row.style.transition = `all 0.3s ease ${delay}s`;
          row.style.transform = 'translateY(100%)';
          row.style.opacity = 0;
        });

        // 整体下移
        setTimeout(() => {
          el.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
          el.style.transform = 'translateY(100%)';
          done();
        }, rows.length * 50);
      } else {
        done();
      }
    },
    // 动画钩子函数 - 进入前
    beforeEnter(el) {
      if (el.querySelector('.el-table__body-wrapper')) {
        // 设置整个表格的初始状态
        el.style.opacity = 1;
        el.style.transform = 'translateY(100%)';
        el.style.overflow = 'hidden';
        
        // 设置每一行的初始状态
        const rows = el.querySelectorAll('.el-table__row');
        rows.forEach((row) => {
          row.style.opacity = 0;
          row.style.transform = 'translateY(100%)';
        });
      }
    },
    // 动画钩子函数 - 进入中
    enter(el, done) {
      const tableHeader = el.querySelector('.el-table__header-wrapper');
      const tableBody = el.querySelector('.el-table__body-wrapper');
      
      if (tableBody) {
        // 确保表头隐藏
        if (tableHeader) {
          tableHeader.style.opacity = 0;
          tableHeader.style.visibility = 'hidden';
        }
        
        // 分阶段动画
        setTimeout(() => {
          // 第一阶段：整体上移
          el.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
          el.style.transform = 'translateY(0)';
          
          // 第二阶段：逐行从下往上显现
          setTimeout(() => {
            const rows = el.querySelectorAll('.el-table__row');
            rows.forEach((row, index) => {
              // 设置每行的动画，按顺序从下往上出现
              row.style.transition = `opacity 0.3s ease ${index * 0.05}s, transform 0.3s ease ${index * 0.05}s`;
              row.style.opacity = 1;
              row.style.transform = 'translateY(0)';
            });
            
            // 表格行动画完成后显示表头
            setTimeout(() => {
              if (tableHeader) {
                tableHeader.style.transition = 'opacity 0.3s ease';
                tableHeader.style.opacity = 1;
                tableHeader.style.visibility = 'visible';
              }
              done();
            }, rows.length * 0.05 * 1);
          }, 400);
        }, 50); 
      } else {
        done();
      }
    },

    // 上传文件类型选择
    handleTypeSelect2() {
      if (this.selectedType) {
        this.showUpload = true
      }
    },  

    // 预览文件（未完善，仅仅能预览pdf文件）
    preview_doc(row) {
      window.open(`${DocServer}${row.file_path}`);
    },
    // 下载文件
    download_doc(row) {
      axios.post(`${DocServer}download`, 
        { file_path: row.file_path },
        {
          responseType: 'blob',
          withCredentials: true
        }
      ).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', row.file_name)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error => {
        this.$message.error('下载失败: ' + error.response?.data?.error)
      })
    },
    // 删除文件
    delete_doc(row) {
      this.$confirm('确认删除该文件？', '提示', {
        type: 'warning'
      }).then(() => {
        // 先删除物理文件
        axios.delete(`${DocServer}delete/${encodeURIComponent(row.file_path)}`, {
          withCredentials: true
        }).then(() => {
          // 再删除数据库记录
          delDocument(row.id).then(() => {
            this.loadCourseDocuments();
            this.$message.success('删除成功');
          });
        }).catch(error => {
          this.$message.error('文件删除失败: ' + (error.response?.data?.error || error.message));
        });
      }).catch(() => {});
    },

    // 上传文件
    handleFileChange(file) {
      this.uploadDocuments.push({
        courseId: this.course.courseId,
        courseName: this.course.courseName,
        type: this.selectedType,
        name: file.raw.name,
        fileSuffix: file.raw.name.split('.').pop(),
        filePath: `course/course_doc/${this.course.courseCategory}/${this.course.courseName}/${this.selectedType}/${file.raw.name}`,
        raw: file.raw,
      })
      // console.log('uploadDocuments:', JSON.parse(JSON.stringify(this.uploadDocuments)))
    },
    // 上传文件到File_PyServer本地服务器
    async handleUp() {
      try {
        for (const doc of this.uploadDocuments) {
          // 先保存文件信息到数据库
          await addDocument(doc);

          // 再保存源文件到File_PyServer
          const formData = new FormData();
          const relativePath = `course/course_doc/${this.course.courseCategory}/${this.course.courseName}/${this.selectedType}/${doc.raw.name}`;

          // 传递文件和文件路径
          formData.append('file', doc.raw);
          formData.append('filePath', relativePath);          
          await axios.post(`${DocServer}upload`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            withCredentials: true  // 必须设置为true
          }).then(response => {
            if (response.data.status !== 'success') {
              throw new Error(response.data.error || '上传失败');
            }
          });
        }
        this.$message.success('全部文件上传成功');
        this.uploadDocuments = [] // 清空上传列表
        this.loadCourseDocuments() // 刷新表格数据
      } catch (error) {
        this.$message.error(`上传失败: ${error.message}`);
      }
    },
    handleDeleteUpload(index) {
      this.uploadDocuments.splice(index, 1);
    },
    
  }
}
</script>

<style lang="scss" scoped>
// 全局样式变量
$primary-color: #409EFF;
$text-color: #303133;
$text-color-secondary: #606266;
$border-color: #e4e7ed;
$bg-color: #f5f7fa;

.app-container {
  transform-origin: top center;
  transform: scale(0.75);
  width: 100%;
}
// 课程封面
.course-cover {
  height: 300px;
  width: 125%;
  margin-left: -12.5%;

  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  transition: height 0.3s ease;

  @media (max-width: 768px) {
    height: 180px;
  }
}

// 容器样式
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 课程标题区域
.course-header {
  padding: 25px 0;
  background: #fff;
  margin-top: -100px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;

  .course-title-section {
    padding: 0 20px;
  }

  .course-title {
    font-size: 28px;
    color: $text-color;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .course-brief-intro {
    font-size: 16px;
    color: $text-color-secondary;
    margin-bottom: 15px;
    line-height: 1.6;
  }

  .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;

    .meta-item {
      display: inline-flex;
      align-items: center;
      color: $text-color-secondary;
      font-size: 14px;

      i {
        margin-right: 5px;
        color: $primary-color;
      }
    }
  }
}

// 主内容区域
.main-content {
  padding: 30px 0;

  .course-tabs {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
}

// 课程介绍
.course-intro-content {
  padding: 25px;

  h3 {
    font-size: 18px;
    color: $text-color;
    margin: 25px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid $border-color;
  }

  .content-section {
    color: $text-color-secondary;
    line-height: 1.8;
    font-size: 15px;
    text-align: justify;
  }
}

// 课程课件
.material-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0px 20px;
}
.upload-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.material-table {
  width: 100%;
  margin: 20px auto;
}

.header-filter {
  cursor: pointer;
  padding: 0 5px;
  &:hover {
    color: #409EFF;
    background: #f5f7fa;
  }
}
.type-options {
  padding: 5px 0;
  .type-item {
    font-size: 12px; 
    padding: 6px 10px;    
    cursor: pointer;
    &:hover {
      background: #f5f7fa;
      color: #409EFF;
    }
  }
}

/* 表头固定+动画融合方案 */
.animated-table {
  .el-table__header-wrapper {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* 合并过渡动画 */
  .table-transition-enter-active {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .table-transition-leave-active {
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    position: absolute;
  }

  /* 优化行级动画 */
  .el-table__body tr {
    transition: 
      transform 0.3s ease,
      opacity 0.2s linear;
  }

  /* 复合动画效果 */
  .table-transition-enter-from {
    opacity: 0;
    transform: translateY(20px) scaleY(0.8);
  }
  .table-transition-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }

  /* 性能优化 */
  .el-table__row {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}


// 上传区域
.upload-container {
  width: 100%;
  height: 100%;
  min-height: 200px; /* 防止内容压缩 */
  display: flex;
  position: relative;
}

// 上传区域 - 拖拽区域 (左侧) 80%
/* 拖拽区域active变化前后 */
.upload-area {
  flex: 0 0 0;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.upload-area.active {
  flex: 0 0 80%;
  opacity: 1;
  padding-right: 20px; /* 与右侧面板的间隔 */
}
/* 调整拖拽区域样式 */
// 功能容器，管理上传逻辑
::v-deep .el-upload {
  width: 100%;
  height: 200px !important; /* 固定高度 */
  min-height: 200px; /* 防止内容压缩 */
  display: flex;
  flex-direction: column;
}
// 视觉元素容器，实现拖拽动画效果
::v-deep .el-upload-dragger {
  border-radius: 8px;
  border: 2px dashed #dcdfe6;
}
::v-deep .el-upload:hover .el-upload-dragger {
  border-color: #409EFF;
  background: #f8f9fa;
}
.el-icon-upload {
  font-size: 50px !important;
  color: #409EFF;
}

.dragger-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dragger-up {
  min-height: 0; /* 添加此属性解决内容溢出 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragger-middle {
  font-size: 14px;
  color: #afb3bc;
  line-height: 1.2;
  text-align: center;
}
.dragger-down {
  font-size: 10px;
  color: #909399;
  padding-bottom: 15px;
  text-align: center;
}

// 上传区域 - 类型选择面板 (右侧) 20%
/* 类型选择面板active变化前后 */
.type-panel {
  flex: 0 0 100%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.type-panel.active {
  flex: 0 0 20%;
}
.type-select-panel {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #f8f9fa;
}
.type-select-panel h4{
  font-size: 14px;
  color: #909399;
  margin-bottom: 15px; 
  text-align: center;
}

/* 待上传文件表格动画 */
.upload-table-container {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.upload-table-container.active {
  opacity: 1;
}

/* 上传区域过渡动画容器 */
.upload-wrapper {
  width: 100%;
  // transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 上传区域淡入淡出动画 */
// .upload-fade-enter-active,
// .upload-fade-leave-active {
//   transition: opacity 0.5s ease, transform 0.5s ease;
// }
/* 上传区域淡入淡出动画 */
.upload-fade-enter-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.upload-fade-leave-active {
  // transition: opacity 0.5s ease, transform 0.5s ease;
}
.upload-fade-enter-from,
.upload-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

// 教师信息卡片
.teacher-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .teacher-info {
    display: flex;
    align-items: center;
    padding: 20px;

    .teacher-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15px;
      border: 3px solid $bg-color;
    }

    .teacher-details {
      .teacher-name {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 5px;
      }

      .teacher-university {
        color: $text-color-secondary;
        font-size: 14px;
      }
    }
  }
}

// 课程信息卡片
.course-info-card {
  border-radius: 8px;
  overflow: hidden;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .card-header {
    background-color: $bg-color;
    font-weight: 500;
  }

  .info-item {
    padding: 12px 0;
    border-bottom: 1px dashed $border-color;
    display: flex;
    justify-content: space-between;

    &:last-child {
      border-bottom: none;
    }

    label {
      color: $text-color-secondary;
    }

    span {
      font-weight: 500;
    }
  }

  .enroll-button {
    margin-top: 20px;

    .btn-block {
      width: 100%;
      padding: 12px 0;
      font-size: 16px;
    }
  }
}

// 空状态样式
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: $text-color-secondary;

  i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #c0c4cc;
  }
}

</style>